<template>
    <baseDrawer ref="drawerRef" width="900px" :title="drawerTitle" :showFooter="false" @close="handleClose">
        <div class="app-info">
            <div class="image">
                <el-carousel height="300px" indicator-position="outside">
                    <el-carousel-item v-for="item in detailData?.carousel_urls" :key="item">
                        <el-image class="h-[300px] flex items-center justify-center" :src="item" preview-teleported="true" :preview-src-list="[item]" fit="contain" />
                    </el-carousel-item>
                </el-carousel>
            </div>
            <div class="content">
                <div class="title">{{ detailData.name }}</div>
                <div class="item">
                    <div class="label">应用价格</div>
                    <div class="text">
                        <span class="text-danger" v-if="detailData.price > 0">￥{{ detailData.price }}</span>
						<span v-else><el-tag>免费</el-tag></span>
                    </div>
                </div>
                <div class="item">
                    <div class="label">应用标识</div>
                    <div class="text">{{ detailData.identify }}</div>
                </div>
                <div class="item">
                    <div class="label">最新版本</div>
                    <div class="text"> v {{ detailData.version }}</div>
                </div>
                <div class="item">
                    <div class="label">发布日期</div>
                    <div class="text">{{ detailData.create_time }}</div>
                </div>
                <div class="item">
                    <div class="label">更新日期</div>
                    <div class="text">{{ detailData.update_time }}</div>
                </div>
                <div class="item">
                    <div class="label">应用分类</div>
                    <div class="text">{{ detailData.category_name }}</div>
                </div>
                <div class="item">
                    <div class="label">下载次数</div>
                    <div class="text">{{ detailData.download_count }}</div>
                </div>
                <div class="item">
                    <div class="label">应用简介</div>
                    <div class="text">{{ detailData.describe }}</div>
                </div>
                <div class="button">
                    <div v-if="detailData.is_buy">
                        <el-button v-if="!detailData.local?.id" size="default" v-auth="'addons/install'" type="primary" @click="handleInstall(detailData)"> 安装 v {{detailData?.version}} </el-button>
                        <el-button v-if="detailData.local?.id" size="default" disabled> 已安装 v {{detailData.local?.version}} </el-button>
                        <el-button v-if="detailData.local?.id && compareVersions(detailData.version, detailData.local?.version) > 0" v-auth="'addons/update'" size="default" type="primary" @click="handleUpadate(detailData)"> 更新 v {{detailData?.update_version}} </el-button>
                        <el-button v-if="detailData.local?.id" v-auth="'addons/uninstall'" size="default" type="danger" @click="handleUnInstall(detailData)"> 卸载 </el-button>
                    </div>
                    <el-button v-else size="default" type="danger" @click="handleBuy(detailData)"> 立即购买 </el-button>
                </div>
            </div>
        </div>
        <div class="grid-container">
            <el-tabs
                v-model="activeTab"
                tab-position="top" 
                style="width: 100%;"
            >
                <el-tab-pane label="应用介绍" name="detail">
                    <MdPreview
                        :modelValue="detailData.content"
                        theme="light"
                        previewTheme="github"
                    />
                </el-tab-pane>
                <el-tab-pane label="版本更新" name="version">
                    <el-timeline>
                        <el-timeline-item  v-for="item in detailData?.update_list" :key="item.id"  :timestamp="item.create_time" placement="top">
                            <el-card>
                                 <template #header>
                                    <div class="version-header">
                                        <span class="text-[20px]">v {{ item.version }}</span>
                                        <span>{{ item.name }}</span>
                                    </div>
                                </template>
                                <MdPreview
                                    :modelValue="item.update_desc"
                                    theme="light"
                                    previewTheme="github"
                                />
                            </el-card>
                        </el-timeline-item>
                    </el-timeline>
                </el-tab-pane>
            </el-tabs>
        </div>
    </baseDrawer>
    <InstallDialog v-if="showInstallDialog" ref="installDialogRef" @close="showInstallDialog = false" />
    <UnInstallDialog v-if="showUnInstallDialog" ref="uninstallDialogRef" @close="showUnInstallDialog = false" />
    <UpadteDialog v-if="showUpdateDialog" ref="updateDialogRef" @close="showUpdateDialog = false" />
</template>

<script setup lang="ts" name="appStoreDetail">
import { ref, computed, onMounted, nextTick } from 'vue';
import { manageDetail } from '/@/api/addons/manage';
import { MdPreview } from 'md-editor-v3';
import { compareVersions } from '/@/utils/util';
import 'md-editor-v3/lib/style.css';
import InstallDialog from '/@/views/appStore/component/install.vue';
import UnInstallDialog from '/@/views/appStore/component/uninstall.vue';
import UpadteDialog from '/@/views/appStore/component/update.vue';
import { messageBox } from '/@/utils/message';

const drawerRef = ref(null);

const drawerTitle = computed(() => {
    return '应用详情';
});

const activeTab = ref('detail');

const installDialogRef = ref();

const showInstallDialog = ref(false);

const uninstallDialogRef = ref();

const showUnInstallDialog = ref(false);

const updateDialogRef = ref();

const showUpdateDialog = ref(false);

const emit = defineEmits(['close']);

const detailData = ref(null);

const setFormData = async (row: any, callback: any) => {
    const data = await manageDetail({
        identify: row.identify
    });

    detailData.value = data;
    callback && callback();
};

const handleClose = () => {
    emit('close');
};

const open = () => {
    drawerRef.value?.open();
};

// 购买
const handleBuy = async (row: any) => {
	window.open('https://www.tmadmin.cn/store/detail/' + row.id, '_blank', 'noopener,noreferrer');
};

// 安装
const handleInstall = async (row: any) => {
    showInstallDialog.value = true;
    nextTick(() => {
        installDialogRef.value?.setFormData(row, () => {
            installDialogRef.value?.open();
        });
    });
};

// 更新
const handleUpadate = async (row: any) => {
    showUpdateDialog.value = true;
    nextTick(() => {
        updateDialogRef.value?.setFormData(row, () => {
            updateDialogRef.value?.open();
        });
    });
};

// 卸载
const handleUnInstall = async (row: any) => {
	messageBox('确认要卸载应用吗？卸载后数据不可恢复').then(async () => {
        showUnInstallDialog.value = true;
        nextTick(() => {
            uninstallDialogRef.value?.setFormData(row, () => {
                uninstallDialogRef.value?.open();
            });
        });
	});
};


onMounted(() => {

});

defineExpose({
    open,
    setFormData,
});

</script>
<style lang="scss">
.app-info {
    display: flex;
    position: relative;

    .image {
        max-width: 41%;
        width: 300px;
    }

    .content {
        position: relative;
        flex: 1;
        padding: 0 15px;
        .title {
            padding-bottom: 10px;
            font-size: 20px;
        }
        .item {
            display: flex;
            align-items: center;
            padding: 8px 0;
            .label {
                font-size: 14px;
                color: var(--el-text-color-secondary);
                width: 70px;
            }
            .text {
                font-size: 14px;
                color: #333;
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                flex: 1;
            }
        }
        .button {
            margin-top: 10px;
        }

    }
}
.grid-container {
    display: grid;
    grid-template-columns: 1fr;
}
.grid-container .el-tabs__nav {
    width: 100%;
    display: flex;
}
.grid-container .el-tabs__item {
    flex: 1;
    text-align: center;
    white-space: nowrap;
}
.version-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>
